<template>
	<div class="sliderassembly">
		<el-collapse v-model="activeNames">
			<el-collapse-item :title="items.title" :name="index + 1" v-for="(items, index) in datas" :key="index">
				<div
					class="componList"
					draggable="true"
					@dragstart="drag($event)"
					@dragend="dragends($event)"
					:data-name="item.name"
					v-for="(item, ind) in items.comList"
					:key="ind"
				>
					<SvgIcon :name="item.icon" :size="30"></SvgIcon>
					<p>{{ item.text }}</p>
				</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
import { reactive } from 'vue';
export default {
	name: 'sliderassembly',
	props: {
		pointer: Object,
	},
	setup(props) {
		// 侧边栏组件显示
		const activeNames = reactive([1, 2, 3, 4, 5, 6]);

		// 组件信息配置
		const datas = reactive([
			{
				title: '基础组件',
				comList: [
					{
						text: '商品搜索',
						icon: 'my-icon icon-sousuoleimu',
						name: 'commoditysearch',
					},
					{
						text: '图文导航',
						icon: 'my-icon icon-tuwendaohang',
						name: 'graphicnavigation',
					},
					{
						text: '魔方',
						icon: 'my-icon icon-mofang',
						name: 'magiccube',
					},
					{
						text: '公告',
						icon: 'my-icon icon-gonggao',
						name: 'notice',
					},

					// {
					// 	text: '店铺信息',
					// 	icon: 'my-icon icon-dianpu',
					// 	name: 'storeinformation',
					// },
					{
						text: '列表导航',
						icon: 'my-icon icon-theme-cell',
						name: 'entertheshop',
					},
					{
						name: 'gridbar',
						text: '宫格导航',
						icon: 'my-icon icon-jiugongge',
					},
					// {
					// 	text: '自定义模块',
					// 	type: 'demo',
					// 	icon: 'my-icon icon-zidingyi',
					// 	name: 'custommodule',
					// },
				],
			},
			{
				title: '商品组件',
				comList: [
					{
						text: '商品卡片',
						icon: 'my-icon icon-31quanbushangpin',
						name: 'goodsCard',
					},
					// {
					// 	text: '文章模块',
					// 	icon: 'my-icon icon-wenzhang',
					// 	name: 'storenotecard',
					// },
					{
						text: '商品栏',
						icon: 'my-icon icon-shangpinlan',
						name: 'goodsShelves',
					},
				],
			},
			{
				title: '图文组件',
				comList: [
					{
						name: 'carousel',
						text: '轮播图',
						type: 'imageBanner',
						icon: 'my-icon icon-lunboxiaoguo',
					},
					{
						text: '标题文本',
						icon: 'my-icon icon-tuwendaohang',
						name: 'captiontext',
					},

					{
						text: '图片展示',
						type: 'imageBlock',
						icon: 'my-icon icon-danchuangguanggao1',
						name: 'pictureshow',
					},
					{
						text: '视频',
						type: 'videoPlayer',
						icon: 'my-icon icon-shipin',
						name: 'videoss',
					},

					{
						text: '辅助分割',
						icon: 'my-icon icon-fuzhuxian',
						name: 'assistline',
					},

					{
						text: '热区',
						icon: 'my-icon icon-remai',
						name: 'hotzone',
					},
				],
			},
			{
				title: '营销组件',
				comList: [
					// {
					// 	text: '社群涨粉',
					// 	type: '1-14',
					// 	icon: 'my-icon icon-shequn',
					// 	name: 'communitypowder',
					// },
					// {
					// 	text: '关注公众号',
					// 	type: '1-15',
					// 	icon: 'my-icon icon-guanzhugongzhonghao',
					// 	name: 'follow',
					// },
					{
						text: '拼团',
						type: '1-15',
						icon: 'my-icon icon-pintuan',
						name: 'pingtuan',
					},
					{
						text: '秒杀',
						type: '1-15',
						icon: 'my-icon icon-miaosha',
						name: 'seckill',
					},
					{
						text: '积分商城',
						type: '1-15',
						icon: 'my-icon icon-jifenshangcheng',
						name: 'shopScore',
					},
					{
						text: '优惠券',
						type: '1-15',
						icon: 'my-icon icon-youhuijuan',
						name: 'coupon',
					},
				],
			},
		]);

		/**
		 * 当用户开始拖动元素或选择文本时触发此事件
		 *
		 * @param {Object} event event对象
		 */
		const drag = (event) => {
			console.log('event: ', event.target.dataset.name);

			/* 开启穿透 */
			props.pointer.show = true;
			/* 传递参数 */
			event.dataTransfer.setData('componentName', event.target.dataset.name);
		};

		/**
		 * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
		 *
		 * @param {Object} event event对象
		 */
		const dragends = () => {
			/* 关闭穿透 */
			props.pointer.show = false;
		};

		return {
			activeNames,
			datas,
			drag,
			dragends,
		};
	},
};
</script>

<style scoped lang="scss">
:deep(.el-collapse-item__header) {
	padding: 0 12px;
}
/* 组件 */
.sliderassembly {
	width: 275px;
	height: 100%;

	box-sizing: border-box;
	background: #fff;
	/* 滚动条 */
	&::-webkit-scrollbar {
		width: 1px;
	}
	&::-webkit-scrollbar-thumb {
		background-color: #155bd4;
	}
	:deep(.el-collapse-item__header),
	:deep(.el-collapse-item__wrap) {
		border-bottom: 0 !important;
	}

	/* 组件列表 */
	.componList {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		width: 80px;
		height: 88px;
		margin-bottom: 8px;
		align-items: center;
		cursor: all-scroll;
		transition: all 0.3s;
		&:hover {
			background: #155bd4;
			border-radius: 2px;
			font-weight: 700;
			i,
			p,
			span {
				color: #fff;
			}
		}
		/* 图标 */
		i {
			font-size: 32px;
			width: 32px;
			height: 32px;
			line-height: 32px;
			color: #b0a8a8;
			margin-top: 4px;
		}
		/* 标题 */
		p {
			font-size: 12px;
			color: #323233;
			margin-top: 4px;
		}
		/* 数量 */
		span {
			color: #7d7e80;
			margin-top: 4px;
			font-size: 10px;
		}
	}
}
</style>
